<template>
  <div>
    <h1>vuex 的辅助函数用法</h1>
    <h1>注入state的count：{{count}}</h1> 
    <h1>注入state的count：的token:{{token}}</h1>

    <h1>注入的getters ：{{countGetter}}</h1>
    <h1>注入getters的token :{{tokens}}</h1>
    <!-- 调用mutations -->
    <button @click="changeCount(20)">触发注入mutations的方法</button>

    <button @click="toLogin">登录</button>
    <!-- 调用actions  -->
     <button @click="actCount(50)">触发注入的actions</button>
     <!-- 使用分模块的 state -->
      <h1 v-for="item in list" :key="item">{{item}}</h1>

      <button @click="add('王宝强')">触发分模块的mutations</button>
      <button @click="actList('刘德华')">触发分模块的actions </button>
  </div>
</template>

<script>
// vuex 提供了4个辅助函数  
// mapState mapGetters 将vuex的 state和getters 数据 注入到本组件的计算属性 进行使用

// mapMutations mapActions 将vuex的mutations actions的方法 注入本组件的methods 中进行使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: '2304BAddressFour',

  data() {
    return {
      msg:"欢迎光临红浪漫"
    };
  },
  computed:{
      ...mapState(["count","token"]),//将state 的数据注入
      ...mapGetters(["countGetter",'tokens']),
      ...mapState("threeStore",["list"]), //将state 的数据注入 ("分模块名",[])
      ...mapGetters("threeStore",["listget"]), //注入分模块的getters 
      Cmsg(){
        return this.msg+"男宾三位"
      }
  },
  mounted() {
    
  },
  methods: {
      ...mapMutations(["changeCount","changeToken"]),
      ...mapActions(["actCount","actToken"]), 
      ...mapMutations('threeStore',["add"]),//分模块的mutations 
      ...mapActions('threeStore',["actList"]),//分模块的actions
      toLogin(){
        let res={token:"sdhfkashfksdhfksahkjh"}
        // this.changeToken(res.token)//触发注入的mutations的方法
        this.actToken(res.token)
      }
  }
};
</script>